<template>
  <div class="log-box" :style="'top:' + top + 'rem'"> {{show}}
    <div class="log" v-for="log in logs" track-by="$index" :class="{'even': $index%2}" :style="'color:' + log.split('color:')[1]">{{log.split('color:')[0]}}</div>
  </div>
</template>

<script>
  module.exports = {
    props: {
      top: {
        type: Number,
        default: 3
      },
      logs: {
        type: Array,
        default: ['调试日志：']
      }
    },

    created () {

    }
  }
</script>

<style lang="stylus">
  .log-box
    position fixed
    top 0
    left 0
    width 100%
    max-height 5rem
    z-index 9999
    background rgba(0,0,0,0.7)
    overflow auto
    padding-bottom 2rem
    box-sizing border-box
    .log
      font-size 5vw
      color #fff
    .log.even
      color #ccc
    .on-off
      width 8vmin
      height 8vmin
      background red
      position fixed
      right 0
      bottom 0
</style>
